<template>
  <main>
    <div class="top"></div>
    <div id="container">
      <!-- 左边标语 -->
      <div id="c-1">
        <p style="font-size: 60px;font-weight: 500;">招人才&nbsp;&nbsp;好平台&nbsp;&nbsp;新机遇</p>
        <p style="font-size: 32px;">千城百行企业版</p>

      </div>
      <!-- 登录界面 -->
      <div id="c-2">
        <button :class="[ isLogin?'bt2':'bt1' ]" @click="isLogin=true">登录</button>
        <button :class="[ isLogin?'bt1':'bt2' ]" @click="isLogin=false">注册</button>
        <br/>
        <br/>
        <div v-show="isLogin" id="login">
          <input
              v-model="user.userName"
              :placeholder="userPlace"
              id="userName"
              name="userName"
              type="text"
          />
          <input v-model="user.password" :placeholder="passPlace" style="margin-top: 30px" name="pwd" type="password"/>

          <br>
          <br><br>
          <div id="remember">
            <span id="forget" @click="$router.push('rePwd')">忘记密码?</span>
          </div>
          <br>
          <!--          滑动验证码-->
          <div v-show="captchaShow" id="captcha">
            <div style="display: flex;justify-content: space-around;width: 100%">
              <h4>请滑动到正确位置</h4><i @click="captchaShow=false" style="cursor: pointer" class="el-icon-error">关闭</i>
            </div>
            <drag-verify-rotate ref="dragVerify"
                                :imgsrc="require('@/assets/img/cap.jpg')"
                                :isPassing.sync="yanzheng"
                                text="请按住滑块拖动"
                                successText="验证通过"
                                handlerIcon="el-icon-d-arrow-right"
                                successIcon="el-icon-circle-check"
                                @refresh="onRefresh"
                                @passcallback="onSuccess"
            >
            </drag-verify-rotate>
            <p style="font-size: 13px">{{ msg }}</p>
          </div>
          <button @click="login()" id="loginBt">登录<i v-if="loading" class="el-icon-loading"></i></button>
        </div>
        <div v-show="!isLogin" id="register">
            <input
                v-model="registerUser.userName"
                :placeholder="userPlace"
                name="userName"
                type="text"/>
            <input v-model="registerUser.password" :placeholder="passPlace" name="pwd" type="password"/>
            <input v-model="registerUser.tel" name="tel" placeholder="输入手机号" maxlength="11" style="margin-top: 10px;"/>
            <br>
            <input v-model="registerUser.captcha" name="captcha" placeholder="输入短信验证码" style="width:50%"/>

            <el-button :disabled="this.showNum" style="height:40px;width:50%;" type="info" plain  @click="send" class="btn_number" v-bind:class="{gray:wait_timer>0}">
              <span class="num_green" v-show="showNum" v-bind:class="{num:wait_timer>0}">{{ this.wait_timer + "s " }}</span>
              <span class="span_number" v-bind:class="{gray_span:wait_timer>0}">{{ getCodeText() }}</span>
            </el-button>
            <br><br>
          <br>
          <button @click="toRegister()" id="registerBtn">注册<i v-if="loading" class="el-icon-loading"></i></button>
        </div>
      </div>
    </div>
  </main>
</template>


<script>
import dragVerifyRotate from 'vue-drag-verify-img-rotate'
import {sendCaptcha} from "@/network/companyUser";
import {register} from "@/network/companyUser";
export default {
  name: "Login",
  components: {
    dragVerifyRotate,
  },
  data() {
    return {
      checked: false,
      loading: false,
      user: {
        userName: "", //用户名
        password: "" //密码
      },
      registerUser: {
        userName: "",
        password: "",
        tel: "",
        captcha: ""
      },
      yanzheng: false,
      token: '',
      userPlace: "输入用户名",
      passPlace: "输入密码",
      submitTxt: "登录",
      register: false,
      msg: '',
      captchaShow: false,
      isLogin: true,
      wait_timer: false,
      showNum: false,
    };
  },
  methods: {

    onSuccess() {
      this.msg = '验证通过~你的手速比99%的人都快'
      this.onRefresh();
      this.yanzheng = false;
      const useInfo = {
        userName: this.user.userName,
        password: this.user.password,
      }
      //登录
      this.$store.dispatch("user/login", useInfo)
      this.captchaShow = false;
    },
    onRefresh() {
      this.msg = ''
    },
    login() {
      if (!this.user.userName) {
        this.$message.error("用户名不能为空!")
      } else if (!this.user.password) {
        this.$message.error("请填写密码~")
      } else {
        this.captchaShow = true;
      }
    },
    toRegister() {
      if (!this.registerUser.userName) {
        this.$message.error("用户名不能为空!")
      } else if (!this.registerUser.password) {
        this.$message.error("请填写密码~")
      } else if(!this.registerUser.tel){
        this.$message.error("请填写手机号~")
      }else if(!this.registerUser.captcha){
        this.$message.error("请填写验证码~")
      }else{
        var  userName=this.registerUser.userName;
         var password= this.registerUser.password;
        var  tel= this.registerUser.tel;
        var  captcha= this.registerUser.captcha;
        //登录
       register(userName,password,tel,captcha).then(res=>{
         if(res.data.code!==undefined){
           this.$message.success("注册成功");
           this.registerUser.captcha='';
           this.registerUser.userName='';
           this.registerUser.tel='';
           this.registerUser.password='';
           this.isLogin=true;
         }
       });
      }
    },
    send() {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if(reg.test(this.registerUser.tel)){
        sendCaptcha(this.registerUser.tel).then(res=>{
          if(res.data!==undefined){
            this.$message.success(res.data.data);
          }
        });
        this.showNum = true;
        this.wait_timer = 120;
        var that = this;
        var timer_interval = setInterval(function() {
          if (that.wait_timer > 0) {
            that.wait_timer--;
          } else {
            clearInterval(timer_interval);
          }
        }, 1000);
      }else{
        this.$message.warning("手机号错误");
      }
    },
    getCodeText: function() {
      if (this.wait_timer > 0) {
        return "已发送";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送验证码！";
      }
      if (this.wait_timer === false) {
        return "发送验证码！";
      }
    },
  }
};
</script>

<style lang="stylus" scoped>
color = rgb(187, 187, 187)
*
  padding 0
  margin 0

main
  width 100%
  height 100vh
  display flex
  justify-content center
  background-image: url(../../assets/img/login.png)
  background-repeat: no-repeat
  background-size: 100%

#container
  width 80%
  display flex
  justify-content space-between
  box-sizing border-box
  padding 100px 0

#c-2
  position relative
  width 388px
  height 480px
  padding 60px
  box-sizing border-box
  background-color #fff
  box-shadow 0px 0px 16px rgb(180, 166, 166)

  & input
    border none
    background-color #fff
    width 100%
    height 40px
    margin-top 10px
    outline none
    border-bottom 0.5px rgb(216, 204, 204) solid

.bt1
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  color rgb(184, 177, 166)


.bt2
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  border-bottom orange 2px solid
  color black

#loginBt
  margin-top 25px
  width 103%
  height 40px
  background-color rgb(255, 102, 68)
  border none
  outline none
  color white
  cursor pointer

#registerBtn
  margin-top 25px
  width 103%
  height 40px
  background-color rgb(255, 102, 68)
  border none
  outline none
  color white
  cursor pointer

#forget
  color blue
  font-size 14px
  cursor pointer

#captcha
  z-index 3
  width 72%
  height 70%
  background #edf392
  box-shadow 0 0 2px black
  position absolute
  top 100px
  display flex
  flex-direction column
  align-items center
  justify-content center

#remember
  display flex
  justify-content space-between

  & > p
    font-size 13px
    color color
</style>
